<template>
	<view style="display: flex;flex-direction: column;gap: 30rpx;margin-bottom: 100rpx;">
		<view class="card air-box" v-for="(m,i) in airList" :key="i" v-if="airList.length>0">
			<view class="air-top" >
				<view class="air-title">星际机场 #{{m.list[0].airLevel}}</view>
				<view class="air-income">产出: {{m.tataloutputenerg}}能量/天</view>
			</view>
			<view class="card air-list"  v-for="(item,index) in m.list" :key="index">
				<view class="air-left">
					<image :src="getPlane(m.list[0].airLevel-1)" class="air-pic"></image>
					<view class="air-mid">
						<view class="air-name">{{(item.airLevel)+'级飞机'}}</view>
						<view class="air-cc">产出: {{item.outputenerg}}能量</view>
						<view class="air-line">
							<view style="width: 180rpx;">
								<u-line-progress :percentage="item.strength / item.startStrength * 100" height="15rpx"
									:showText="false"
									activeColor="linear-gradient(90deg, #165DFF, #0BFFFF)"></u-line-progress>
							</view>
							<view class="air-line-text">{{item.strength}}/{{item.startStrength}}</view>
						</view>
					</view>
				</view>
				<view class="air-right" @click="open(item)">注入能量</view>
			</view>
			<!-- <view v-if="airList.length < 5" class="air-add">
				<u-icon name="plus" color="#4b5563" size="20"></u-icon>
				<view class="air-add-text">添加飞机</view>
			</view> -->
		</view>
		<view class="none" v-if="airList.length==0">暂无飞机</view>

		<u-popup :show="show" @close="close" mode="center" bgColor="transparent">
			<view class="popup-box">
				<view style="width: 600rpx;height: auto;">
					<view class="popup-top">
						<view class="popup-title">注入能量</view>
						<view class="close-btn" @click="close()">
							<image src="/static/icon-images/close.png" mode="widthFix"></image>
						</view>
					</view>

					<view class="air-name" style="margin-top: 20rpx;">请选择您要注入的能量</view>

					<view style="margin-top: 20rpx;">
						<u-slider v-model="value" :step="1" :min="0" :max="maxValue" :showValue="true"></u-slider>
					</view>

					<view class="sure-btns">
						<view class="sure-btn1 card" @click="close()">取消</view>
						<view class="sure-btn2" @click="submit()">确认</view>
					</view>

				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		getPlane,
		putPlane
	} from '@/api/plane.js'
	export default {
		data() {
			return {
				airList: [],
				show: false,
				value: 1,
				maxValue: 100,
				checkItem: null
			};
		},
		mounted() {

		},
		created() {
			this.getList()
		},
		methods: {
			setMlist(m){
				console.log('M',m);
			},
			getPlane(index) {
				switch (index) {
					case 0:
						return '/static/fly-images/1.png';
					case 1:
						return '/static/fly-images/2.png';
					case 2:
						return '/static/fly-images/3.png';
					case 3:
						return '/static/fly-images/4.png';
					case 4:
						return '/static/fly-images/5.png';
					case 5:
						return '/static/fly-images/6.png';
					case 6:
						return '/static/fly-images/7.png';
					case 7:
						return '/static/fly-images/8.png';
					case 8:
						return '/static/fly-images/9.png';
					case 9:
						return '/static/fly-images/10.png';
					default:
						break;
				}
			},
			open(item) {
				if (item.startStrength - item.strength == 0) {
					uni.showToast({
						icon: 'none',
						title: '当前飞机能量值已满'
					})
					return;
				}
				this.value = 1
				this.show = true
				this.maxValue = item.startStrength - item.strength
				this.checkItem = item
			},
			close() {
				this.show = false
				this.checkItem = null
			},
			async getList() {
				const res = await getPlane()
				let data = res.data.filter(item=>item.list.length>0)
				this.airList = data
			},
			async submit() {
				const Dto = {
					strength: this.value,
					uuid: this.checkItem.uuid
				}

				try {
					const res = await putPlane(Dto)
					uni.showToast({
						icon: 'none',
						title: res.data
					})
					this.close()
					this.getList()
				} catch (error) {
					//TODO handle the exception
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.none{
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
		opacity: 0.8;
	}
	.air-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.air-title {
		line-height: 1;
		font-size: 32rpx;
		font-weight: 600;
		color: #e2e8f0;
	}

	.air-income {
		line-height: 1;
		font-size: 28rpx;
		font-weight: 600;
		color: #60a5fa;
	}

	.air-pic {
		width: 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
	}

	.air-box {
		padding: 30rpx;

	}

	.air-list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 30rpx;
		padding: 30rpx;
	}

	.air-left {
		display: flex;
		align-items: center;
	}

	.air-mid {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.air-name {
		line-height: 1;
		font-size: 30rpx;
		font-weight: 600;
		color: #e2e8f0;
	}

	.air-cc {
		line-height: 1;
		font-size: 24rpx;
		font-weight: 500;
		color: #e2e8f0;
	}

	.air-line {
		display: flex;
		align-items: center;
	}

	.air-line-text {
		line-height: 1;
		font-size: 20rpx;
		font-weight: 600;
		color: #e2e8f0;
		margin-left: 10rpx;
	}

	.air-right {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10rpx 30rpx;
		font-size: 26rpx;
		font-weight: 500;
		background-color: #3b82f6;
		border-radius: 10rpx;
		color: #fff;
	}

	.air-add {
		border-radius: 15rpx;
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		border: #4b5563 dashed 5rpx;
		height: 150rpx;
	}

	.air-add-text {
		margin-top: 20rpx;
		line-height: 1;
		font-size: 24rpx;
		font-weight: 600;
		color: #4b5563;
	}

	.popup-box {
		background: linear-gradient(135deg, #0a1a3a 0%, #050a1a 100%);
		border: 1rpx solid rgba(255, 255, 255, 0.15);
		border-radius: 20rpx;
		overflow-y: auto;
		padding: 30rpx;
	}

	.popup-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.popup-title {
		font-weight: 700;
		font-size: 38rpx;
		color: #e2e8f0;
	}

	.close-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.15);

		image {
			display: block;
			width: 28rpx;
			height: 28rpx;
		}
	}

	.sure-btns {
		display: flex;
		gap: 30rpx;
		margin-top: 35rpx;

		.sure-btn1 {
			border-radius: 20rpx;
			flex: 1;
			padding: 20rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #1e293b;
			color: #e2e8f0;
			font-size: 30rpx;
			font-weight: 30rpx;
		}

		.sure-btn2 {
			border-radius: 20rpx;
			flex: 1;
			padding: 20rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;
			background: linear-gradient(135deg, #3b82f6, #3b82f6);
			color: #fff;
			font-size: 30rpx;
			font-weight: 30rpx;
		}
	}
</style>